<template>
	<baidu-map class="map" :center="center" :zoom="zoom" @ready="initMap" :scroll-wheel-zoom="true"></baidu-map>
</template>
<script>
	export default {
		props:['position'],
		data() {
			return {
				center: { // 经纬度
					lng: 115.7,
					lat: 39.4
				},
				zoom: 1, // 地图展示级别、
				BMap: null, // 百度地图对象
				map: null, // 百度地图实例
			}
		},
		watch:{
		    position:{
				immediate:true,
				deep:true,
				handler(val){
					console.log("tuis",val);
					let { lon , lat } = this.position;
					this.$set(this.center , 'lng' ,lon);
					this.$set(this.center , 'lat' ,lat);
					if (this.BMap !== null && this.map !== null){
					    let  point = new this.BMap.Point(lon ,lat);
					    let  marker = new this.BMap.Marker(point);      // 创建标注
					    this.map.addOverlay(marker);                     // 将标注添加到地图中
					    marker.setAnimation(2);                          // 跳动的动画
					}
				}
		    }
		},
		methods: {
			initMap({
				BMap,
				map
			}) {
				this.BMap = BMap;
				this.map = map;
				this.$set(this.center, 'lng', '需要传递的经纬度');
				this.$set(this.center, 'lat', '需要传递的经纬度');
				this.zoom = '地图需要进行的缩放值';
			}
		}
	}
</script>
<style>
	.map {
		width: 100%;
		height: 250px;
	}
</style>
